<template>
	<z-paging ref="pagingRef" refresher-only @query="queryList">
		<view class="abnormal-agent-layout">
			<view class="abnormal-agent-item" v-for="item in dataList" :key="item.labelId" @tap="showAgentList(item)">
				<text>{{item.labelName}}</text>
				<view class="abnormal-agent-item-right">
					<text>{{item.totalCount}}人</text>
					<xh-icon icon="icon_jiantou"></xh-icon>
				</view>
				<view class="line"></view>
			</view>
			<xh-empty :show="dataList.length == 0"></xh-empty>
		</view>
	</z-paging>
</template>

<script setup>
	import { onLoad,onPullDownRefresh } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getAbnormalAgentList } from '@/common/api/api.js'
	const pagingRef = ref(null)
	const dataList = ref([])
	// 查看异常代理商明细列表
	const showAgentList = (item) => {
		const dataStr = encodeURIComponent(JSON.stringify(item.agentList
))
		uni.navigateTo({
			url: `/pages/home/agent-manager/abnormal-agent/abnomal-agent-list/abnomal-agent-list?data=${dataStr}`
		})
	}
	const queryList = async () => {
		const res = await getAbnormalAgentList()
		dataList.value = res.result
		pagingRef.value.complete()
	}
	onLoad(() => {
		queryList()
	})
</script>

<style lang="scss" scoped>
	.abnormal-agent-layout {

		.abnormal-agent-item {
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			position: relative;

			.abnormal-agent-item-right {
				display: flex;
				align-items: center;
				font-size: 26rpx;
			}
		}
	}
</style>